<template>
  <div class="manageLogin">
    <div class="title">
      <div class="titleText">
        <img src="../assets/logo.png" alt="" width="30" style="position: relative;top: -5px">
        星河鲸鱼
      </div>
    </div>
    <div class="inputWrap">
      <div class="formWrap">
        <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
          <a-form-model-item label="" prop="username">
            <a-input v-model="ruleForm.username" size="large" autocomplete="off" placeholder="用户名">
              <a-icon slot="prefix" type="user"/>
            </a-input>
          </a-form-model-item>
          <a-form-model-item label="" prop="password">
            <a-input v-model="ruleForm.password" type="password" size="large" autocomplete="off" placeholder="密码">
              <a-icon slot="prefix" type="lock"/>
            </a-input>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 24, offset: 0 }">
            <a-button type="primary" @click="submitForm('ruleForm')">
              登录
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>

  </div>
</template>

<script>
  import { loginToken } from "../serves";
  import { setLocalStorage, getLocalStorage, removeLocalStorage } from "../serves/localStorage";

  export default {
    name: "ManageLogin",
    data() {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码！'))
        } else {
          callback()
        }
      }
      const validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名！'))
        } else {
          callback()
        }
      }
      return {
        ruleForm: {
          username: '',
          password: '',
        },
        rules: {
          password: [{
            validator: validatePass,
            trigger: 'change'
          }],
          username: [{
            validator: validateName,
            trigger: 'change'
          }]
        },
        layout: {
          labelCol: {span: 0},
          wrapperCol: {span: 24},
        },
      }
    },
    mounted() {
      window.addEventListener('keydown', this.keyDown);
      if (getLocalStorage('manageUserName')) {
        this.ruleForm.username = getLocalStorage('manageUserName')
      }
    },
    methods: {
      keyDown(e) {
        if (e.keyCode === 13) {
          this.submitForm('ruleForm');
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            loginToken(this.ruleForm).then(res => {
              if (res.status == 200 && res.data.status.code == 200) {
                setLocalStorage('manageToken', res.data.data.accessToken)
                this.$message.success('登录成功！')
                this.$router.push('manageSystem')
                setLocalStorage('manageUserName', this.ruleForm.username)
              } else {
                removeLocalStorage('manageToken')
                this.$message.warning(res.data.message)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .manageLogin {
    padding: 200px;

    .title {
      font-size: 24px;
      margin-bottom: 40px;
    }

    .inputWrap {
      width: 300px;
      margin: 0 auto;

      .ant-btn {
        width: 100px;
        height: 35px;
        font-size: 18px;
        border-radius: 20px;
      }
    }
  }

  @media screen and (max-width: 800px) {
    .manageLogin {
      padding: 200px 10px 10px;
    }

  }

</style>
